<template>
  <div>
    <my-header ischeck="index"></my-header>
    <!-- 主页背景以及中间的介绍 -->
    <div class="conter">
      <div class="home_page">
        <h1 class="animated infinite bounce">welcome my web</h1>
        <!-- 爱心 -->
        <span class="heat" v-show="heatIsShow">
          <!-- <img src="public/img/heat.png"> -->
        </span>
        <!-- 中间按钮 -->
        <label><a href="javascript:;" v-on:click="countDown();heatFly()"
            :class="timer!='Pick Me'?'disabled':''">{{timer=='Pick Me'?timer:`(${timer})S`}}</a></label>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates voluptatibus quo doloribus
          voluptate debitis. Asperiores numquam modi distinctio ullam maiores magni rerum dolore accusamus
          iure placeat maxime autem fuga optio?</p>
      </div>
    </div>
    <my-car></my-car>
    <!-- 网站内容 以及中间的卡片 -->
    <div class="text">
      <!-- 用vue的v-for来动态生成卡片 -->
      <div class="card" v-for='(item,index) of commodity' :key='index'>
        <!-- 用字符串拼接:src="'http://127.0.0.1:3000/'+item.img" 获取存在服务器端的图片 -->
        <img :src="'http://127.0.0.1:3000/'+item.img">
        <h2>{{item.name}}</h2>
        <p>￥{{item.prices}}</p>
        <p>在售：{{item.sole}}</p>
        <button type="button" @click="addToCar" v-bind:data-num='index++'>加入购物车</button>
      </div>
    </div>
    <my-foot></my-foot>
  </div>
</template>

<script>
  import {
    Toast
  } from 'mint-ui';
  export default {
    name: 'index',
    data() {
      return {
        heatIsShow: false,
        commodity: '',
        timer: 'Pick Me',
        uid:this.$store.state.uid
      }
    },
    methods: {

      //倒计时的函数
      countDown() {
        this.timer = 59;
        let that = this
        //定时器还可用箭头函数来改变this的指向
        let time = setInterval(function() {
          if (that.timer <= 0) {
            that.timer = 'Pick Me';
            clearInterval(time)
          } else {
            that.timer--
          }
        }, 1000)
      },
      addToCar(e) {
        let num = e.currentTarget.dataset.num
        this.axios('addcar', {
          params: {
            uid : parseInt(this.uid),
            lid: this.commodity[num].nid,
            price: this.commodity[num].prices,
            lname: this.commodity[num].name,
            limg: this.commodity[num].img,
            n: 1
          }
        }).then(result => {
          if (result.data.code == 1) {
            Toast('添加成功');
          } else {
            Toast('添加失败');
          }
        })
      },
      //心心出现 逐渐变大变淡最后消失 未完成
      heatFly() {
        this.heatIsShow = true
        setTimeout(() => {
          this.heatIsShow = false
        }, 3500)
      }
    },
    beforeCreate() {
        // 监听路由变化
        this.uid=this.$route.query.uid
        console.log(this.$route.query)
         console.log(this.uid)
    },
    created() {
      this.axios.get('product?pagesize=5').then(result => {
          console.log(result.data.data)
          this.commodity = result.data.data
        })
        console.log(this.uid)

    }

  }
</script>

<style scoped>
  .conter {
    width: 100%;
    height: 35rem;
    position: relative;
  }

  .conter:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../assets/img/R-C.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: 1;
    z-index: -10;
  }

  /* 爱心 */
  .home_page .heat {
    background: url(../assets/img/heat.png) no-repeat;
    background-size: 4rem;
    display: inline-block;
    position: fixed;
    left: 48%;
    top: 54%;
    width: 4rem;
    height: 3rem;
    animation: heatFly 4s 1;
  }

  @keyframes heatFly {
    0 {
      opacity: 1;
    }

    100% {
      opacity: 0;
      top: 20%;
      transform: scale(4);
      display: none;
    }
  }

  .home_page {
    z-index: auto;
    position: relative;
    position: absolute;
    width: 43.75rem;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 6rem auto;
    text-align: center;
  }

  .home_page h1 {
    text-decoration: none;
    color: #ffffff;
    margin-bottom: 2rem;
  }

  .home_page a {
    display: block;
    font-size: 2rem;
    text-decoration: none;
    color: #ff557f;
    border: 1px solid #ff557f;
    margin: 3rem 14rem;
    padding: 0.5rem;
  }

  .home_page a:hover {
    background-color: #ff95ba;
  }

  .home_page p {
    text-decoration: none;
    color: #ffffff;
    margin: 2rem 0;
  }

  /* 内容区域 */
  .text {
    margin: 1.25rem 3.25rem;
    text-align: center;
  }

  .text .card {
    display: inline-block;
    width: 14rem;
    height: 20rem;
    padding: 0.4rem;
    margin: 0.5rem;
    text-align: center;
    border: 0.0625rem solid #281A34;
    border-radius: 0.625rem;
  }

  .text .card img {
    width: 13rem;
    height: 7.8125rem;
    border-radius: 0.625rem;
  }

  .text .card h2,
  p {
    margin: 1rem;
  }

  .foot {
    width: 100%;
    height: 150px;
    background-color: #281A34;
  }

  .disabled {
    pointer-events: none;
    background-color: #281A34;
  }
</style>
